<template>
  <!-- 使用:style正确绑定样式 -->
  <div class="loading" :style="{ '--color': props.color }">
    <span></span>
    <span></span>
    <span></span>
    <span></span>
    <span></span>
  </div>
</template>

<script setup lang="ts">
import { defineProps, onMounted } from 'vue'

const props = defineProps({
  color: {
    type: String,
    default: '#000000' // 默认黑色
  }
})

onMounted(() => {})
</script>

<style scoped lang="less">
.loading {
  --speed-of-animation: 0.9s;
  --gap: 3px;

  // 这里使用从父组件传递过来的颜色变量
  --first-color: var(--color);
  --second-color: var(--color);
  --third-color: var(--color);
  --fourth-color: var(--color);
  --fifth-color: var(--color);

  display: flex;
  justify-content: center;
  align-items: center;
  gap: var(--gap);
}

.loading span {
  width: 3px;
  height: 13px;
  background: var(--first-color);
  animation: scale var(--speed-of-animation) ease-in-out infinite;
  border-radius: 20px;
}

.loading span:nth-child(2) {
  background: var(--second-color);
  animation-delay: -0.8s;
}

.loading span:nth-child(3) {
  background: var(--third-color);
  animation-delay: -0.7s;
}

.loading span:nth-child(4) {
  background: var(--fourth-color);
  animation-delay: -0.6s;
}

.loading span:nth-child(5) {
  background: var(--fifth-color);
  animation-delay: -0.5s;
}

@keyframes scale {
  0%,
  40%,
  100% {
    transform: scaleY(0.05);
  }

  20% {
    transform: scaleY(1);
  }
}
</style>
